<template>
  <div>
    <select v-model="prov" @change="updata()">
      <option v-for="(v, i) in data" :key="i">{{ v.name }}</option>
    </select>

    <select v-model="city" @change="updatacity()">
      <option v-for="(v, i) in cityarr" :key="i">{{ v.name }}</option>
    </select>

    <select>
      <option v-for="(v, i) in diqu" :key="i">{{ v }}</option>
    </select>
  </div>
</template>

<script>
import city from "../../mock/city.json";
export default {
  data() {
    return {
      data: [], //全部数据
      cityarr: [], //城市数据
      diqu: [],
      prov: "北京",
      city: "北京",
    };
  },
  created() {
    this.data = city;
  },
  methods: {
    updata() {
      let that = this;
      console.log(that);
      this.data.forEach((item, index) => {
        console.log(index);
        if (item.name == this.prov) {
          this.cityarr = item.city;
        }
      });
    },
    updatacity() {
      let that = this;
      console.log(that);
      this.cityarr.forEach((item, index) => {
        console.log(index);
        if (item.name == this.city) {
          this.diqu = item.area;
        }
      });
    },
  },
  mounted() {
    this.updatacity();
  },
};
</script>

<style lang="scss">
select {
  width: 150px;
  height: 35px;
  margin: 0 5px;
}
</style>
